<template>
	<div>
		<el-drawer :title="`${nodeData.type === 'line' ? '线' : '节点'}操作`" v-model="isOpen" :wrapperClosable="false" size="320px" @close="handleClose">
			<el-scrollbar>
				<LxLine v-if="nodeData.type === 'line'" ref="lineRef" @change="onLineChange" @close="close" />
			</el-scrollbar>
		</el-drawer>
	</div>
</template>

<script>
import LxLine from './line.vue';

export default {
	components: { LxLine },
	data() {
		return {
			isOpen: false,
			nodeData: {
				type: 'line',
			},
			jsplumbConn: {},
			isShowClose: true,
			isDeleLine: true,
		};
	},
	methods: {
		// 打开抽屉
		open(item, conn) {
			console.log('open', item);
			this.isDeleLine = true;
			this.isOpen = true;
			this.jsplumbConn = conn;
			this.nodeData = item;
			this.isShowClose = item.showClose;
			console.log('open', this.isOpen, item);
			this.$nextTick(() => {
				console.log('nextTick', this.$refs.lineRef);
				if (item.type === 'line') this.$refs.lineRef.getParentData(item);
			});
		},
		// 关闭
		close(isDeleLine) {
			this.isDeleLine = isDeleLine;
			this.isOpen = false;
			const lineItem = this.$refs.lineRef.line;
			lineItem.showClose = false;
		},
		// 线 label 内容改变时
		onLineChange(params) {
			this.jsplumbConn.label = params.label;
			this.jsplumbConn.color = params.color;
			this.jsplumbConn.FBItem = params.FBItem;
			this.$emit('label', this.jsplumbConn);
		},
		// 节点内容改变时
		onNodeSubmit(data) {
			this.$emit('node', data);
		},
		handleClose() {
			const formRef = this.$refs.lineRef.$refs.formRef;
			const lineItem = this.$refs.lineRef.line;
			const arr = lineItem.fbname.split('-');
			const jsPlumbInstIndex = arr[arr.length - 1] - 1;
			console.log('handleClose', jsPlumbInstIndex, lineItem);
			if (this.isDeleLine) {
				this.$emit('deleteConnectionLine', jsPlumbInstIndex);
			}
			formRef.validate((valid) => {
				console.log(666, valid);
				if (!valid) {
					this.$message.warning('请填写必传字段');
					return;
				}
			});
		},
	},
};
</script>
